<template>
<!--修改密码-->
  <div style="margin: 0.5em;">
  <div class="image-preview">
    <el-image style="width: 100px; height: 100px;border-radius: 55px;" :src="url" :zoom-rate="1.2" :preview-src-list="srcList"
              :initial-index="4" fit="cover" />
  </div>


  <el-form ref="formRef" :model="loginForm" class="demo-dynamic">
    <el-form-item prop="username" :rules="[
            {
                required: true,
                message: '请输入你的用户名称',
                trigger: 'blur',
            },
        ]">
      <el-input v-model="loginForm.username" placeholder="请输入你的用户名称" autofocus >
        <template #suffix>
          <el-icon class="el-input__icon"><Avatar /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="oldPassword" :rules="[{
            required: true,
            message: '旧的密码不能为空',
            trigger: 'blur',
        },{ min: 8, message: '旧的密码长度不少于8个字符', trigger: 'blur' }  ]">
      <el-input v-model="loginForm.oldPassword" placeholder="请输入旧的密码" show-password >
        <template #suffix>
          <el-icon class="el-input__icon"><WarnTriangleFilled /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="newPassword" :rules="[{
            required: true,
            message: '新的密码不能为空',
            trigger: 'blur',
        },{ min: 8, message: '新的密码长度不少于8个字符', trigger: 'blur' } ]">
      <el-input v-model="loginForm.newPassword" placeholder="请输入新的密码" show-password >
        <template #suffix>
          <el-icon class="el-input__icon"><WarnTriangleFilled /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="repassword" :rules="[{
            required: true,
            message: '二次密码不能为空',
            trigger: 'blur',
        },{ min: 8, message: '新的密码长度不少于8个字符', trigger: 'blur' } ]">
      <el-input v-model="loginForm.repassword" placeholder="请再次输入密码" show-password >
        <template #suffix>
          <el-icon class="el-input__icon"><WarnTriangleFilled /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(loginForm)">确认修改</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="router.push('login')">返回登录</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script setup>
import { reactive, } from 'vue'
import {updatePassword} from '@/http/user'
import {Message,WarnTriangleFilled,Avatar} from '@element-plus/icons-vue'
import router from "../router";
const url ='https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKYL5rCmOPfxXbHfUYib0ZBJtOxrWFABpOEWHKHiaWjP7NmMsiabZDIuznIibHYQNKicH5ic7a5h4jZ2ZjA/132'
// 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const loginForm = reactive({
  newPassword: "",
  oldPassword: "",
  repassword:"",
  username: ""
})

const submitForm = (formEl) => {
  console.log(formEl)
  if (!formEl) return
  if (formEl.newPassword!==formEl.repassword){
    alert("更新密码不一致")
  }
  updatePassword(formEl).then(res=>{
    console.log(res)
    router.push("login");
  }).catch(err=>{
    alert(err.response.data.data.validated_error[0])
    console.log(err)
  })
}

</script>

<style>


.image-preview {
  height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
